<template>
  <div class="home-container">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#ffffff"
          class="el-menu-vertical"
          default-active="1"
          text-color="#1a202c"
          router
        >
        <div class="box">
          <img src="../../assets/1.jpg" alt="cw" style="width: 100%; height: 100%;" />
        </div>
        <el-menu-item index="/home/page1">
            <span>大数据统计界面</span>
          </el-menu-item>
          <el-menu-item index="/home/page2">
            <span>鲜花信息管理</span>
          </el-menu-item>
          <el-menu-item index="/home/page3">
            <span>鲜花供应商管理</span>
          </el-menu-item>
          <el-menu-item index="/home/page4">
            <span>订单管理界面</span>
          </el-menu-item>
          <el-menu-item index="/home/page5">
            <span>投诉处理界面</span>
          </el-menu-item>
          <el-menu-item index="/home/page6">
            <span>个人信息界面</span>
          </el-menu-item>
          <el-menu-item index="/">
            <span>确认退出系统</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

     <!-- 主内容区 -->
  <el-main>
    <div class="bigbox">
      <router-view></router-view>
    </div>
  </el-main>
    </el-container>
  </div>


</template>

<script setup>

</script>

<style scoped>
.home-container {
  height: 100vh;
  background: linear-gradient(145deg, #fff5f5 0%, #fff0f7 100%); /* 粉白渐变背景 */
}

.el-menu-vertical {
  height: 100%;
  background: rgba(255,255,255,0.9) !important; /* 半透明白色背景 */
  border-right: 1px solid rgba(255,182,193,0.3); /* 浅粉色边框 */
}

.el-aside {
  background: linear-gradient(160deg, #fff0f5 30%, #fff9fb 100%); /* 渐变侧边栏 */
  box-shadow: 4px 0 15px rgba(255,192,203,0.1); /* 右侧阴影 */
}

.el-main {
  padding: 20px;
  background: rgba(255,250,250,0.95); /* 柔白底色 */
}

.bigbox{
  width: 100%; /* 响应式宽度 */
  height: calc(100vh - 40px); 
  background: transparent; /* 移除原有背景 */
  border-radius: 12px;
  box-shadow: 0 4px 30px rgba(255,182,193,0.15); /* 粉色系阴影 */
}

.box{
  width: 80%;
  height: 120px;
  margin: 20px auto;
  background: linear-gradient(145deg, #ffb6c1 0%, #ff69b4 100%); /* 渐变品牌色 */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(255,105,180,0.2); /* 立体阴影 */
  transition: transform 0.3s ease;
}

.box:hover {
  transform: scale(1.03);
}

/* 菜单项优化 */
.el-menu-item {
  margin: 8px 12px;
  border-radius: 8px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.el-menu-item:hover {
  background: rgba(255,182,193,0.15) !important;
  transform: translateX(5px);
}

.el-menu-item.is-active {
  background: linear-gradient(90deg, #ffb6c1 0%, #ff69b4 100%) !important;
  color: white !important;
  box-shadow: 0 4px 6px rgba(255,105,180,0.2);
}

/* 文字优化 */
.el-menu-item span {
  font-family: 'Microsoft YaHei', sans-serif;
  font-weight: 500;
  letter-spacing: 0.5px;
}
</style>